<template>
	<view>
		<view class="head">
			<view style="font-size: 28rpx;">
				<text>充值方式</text>
			</view>
			<view class="wechatPay">
				<image src="https://www.tdtye.com/files/vegetable_mall_file/default/static/wechatPay.png"></image>
				<view class="textChat">
					<text>微信支付</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view style="font-size: 28rpx;">
				充值金额
			</view>
			<view>
				<view class="rmb">
					<text>￥</text>
				</view>
				<view class="moneyInput">
					<u--input border="bottom" clearable width="80rpx" type="digit" focus="true" fontSize="70rpx"
						style="height: 100rpx;" v-model="money">
					</u--input>
				</view>
			</view>
			<view class="amount">
				<text>您的当前余额为：{{amount}}元</text>
			</view>
			<view class="goPay">

				<u-button type="primary" shape="circle" text="充值到余额" @click="createOrder"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			this.amount = e.amount
		},
		data() {
			return {
				amount: "",
				money: ""
			}
		},
		methods: {
			//创建订单
			createOrder() {
				this.$axios({
					url: "user/usTopUpWithdrawal/topUp",
					method: "post",
					data: {
						money: this.money,
					}
				}).then((res) => {
					if (res.code == 0) {
						this.$axios({
							url: "wx/pay/createJsApiOrder",
							method: "post",
							data: {
								orderNum: res.result,
								type: 1
							}
						}).then((response) => {
							console.log('res', response)
							if (response.code == 0) {
								uni.requestPayment({
									provider: 'wxpay', //支付类型-固定值
									timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
									nonceStr: response.result.nonceStr, // 随机字符串
									package: response.result.packageValue, // 固定值
									signType: response.result.signType, //固定值
									paySign: response.result.paySign, //签名
									success: function(response) {
										uni.navigateTo({
											url: '../../pages/mine/phone'
										})
										console.log('success:' + JSON.stringify(response));
										console.log("支付成功");
									},
									fail: function(err) {
										uni.showToast({
											title: '支付失败',
											icon: none
										})
									}
								});
							}
						})
					}
				})


			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1d6;
	}

	.head {
		display: flex;
		padding: 40rpx;

		image {
			width: 70rpx;
			height: 70rpx;
		}

		.wechatPay {
			display: flex;
			margin-left: 290rpx;
			line-height: 64rpx;
			margin-top: -7rpx;
			position: relative;

			.background {
				position: absolute;
				background-color: #fbfbfbe0;
				border-radius: 50%;
				width: 92rpx;
				height: 78rpx;
				z-index: -1;
				left: -9rpx;
				top: -2rpx;
			}

			.textChat {
				font-weight: 800;
				margin-left: 25rpx;
			}
		}
	}

	.content {
		margin-top: 10rpx;
		padding: 40rpx;
		background-color: #fff;
		height: 100vh;

		.rmb {
			margin: 21rpx 0rpx;
			font-size: 95rpx;
			position: absolute;
		}

		.moneyInput {
			margin-top: 16rpx;
			margin-left: 100rpx;
			width: 550rpx;
			height: 100rpx;
			position: absolute;
		}

		.u-input__content__field-wrapper__field.u-input__content__field-wrapper__field {
			height: 100rpx;
		}

		.goPay {
			margin-top: 78rpx;
			width: 350rpx;
			text-align: center;
			margin-left: 159rpx;
		}

		.amount {
			margin-top: 174rpx;
			font-size: 22rpx;
			color: #ababab;
		}
	}
</style>
